<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

    /* 入场动画类 */
    .v-enter-from {
        opacity: 0;
    }

    .v-enter-active, .v-leave-active {
        transition: all 0.3s ease-in-out;
    }

    .v-enter-to {
        opacity: 1;
    }

    .v-leave-to {
        opacity: 0;
    }
</style>
<!--
    过渡模式  https://cn.vuejs.org/guide/built-ins/transition.html#transition-modes

    这里是组件过度，切换组件
-->
<body>
<div id="app"></div>
</body>
<script src="js/vue.js"></script>
<script>

    const Box1 = {
        template: `<div>子组件1</div>`
    }

    const Box2 = {
        template: `<div>子组件2</div>`
    }

    const app = Vue.createApp({
        data() {
            return {
                componentName: "box-1"
            }
        },
        methods: {
            change(){
                if (this.componentName === 'box-1') {
                    this.componentName = 'box-2';
                } else {
                    this.componentName = 'box-1';
                }
            }
        },
        components:{
            "box-1": Box1,
            "box-2": Box2
        },
        template: `
          <div>
              <!--     设置过渡模式：先执行离开动画，然后在其完成之后 再执行元素的进入动画         -->
              <transition mode="out-in" appear>
                <component :is="componentName"></component>
              </transition>
              <button @click="change">点击切换</button>
          </div>
        `

    }).mount("#app");
</script>

</html>
